<template>
	<div class="home-cart">
		<div class="store-item" v-for="(item,idx) in cartData">
			<!--<div class="store-info">
				<div class="checkbox">
					<label></label>
					<input type="checkbox" :checked="item.isChecked" @change="handleChangeAllChecked(item,idx,item.isChecked)" />
				</div>
				<img :src="item.store_logo" class="store-icon" />
				<router-link :to="{path: '/store?id=' + item.store_id}">
					<span class="store-name">{{item.store_name}}</span>
					<i class="iconfont icon-rightarrow"></i>
				</router-link>
			</div>-->
			<div class="store-info">
				<div class="checkbox">
					<label></label>
					<input type="checkbox" :checked="item.isChecked" @change="handleChangeAllChecked(item,idx,item.isChecked)" />
				</div>
				<img :src="item.store_logo" class="store-icon" />
				<router-link :to="{path: '/store?id=' + item.store_id}">
					<span class="store-name">{{item.store_name}}</span>
					<i class="iconfont icon-rightarrow"></i>
				</router-link>
			</div>
			<mt-cell-swipe v-for="(itemInfo,$index) in item.dataProductList" :key="itemInfo.id" class="product-item" :right="[
    			{
				    content: '删除',
				    style: { background: 'red', color: '#fff' },
				    handler: () => handleClickDeleteItem(itemInfo,item)
    			}
  			]">
				<div slot="title" class="checkbox">
					<label></label>
					<input type="checkbox" :checked="itemInfo.isChecked" @change="handleChangeCheckedItem(itemInfo,$index,item,idx)" />
				</div>
				<div slot="icon" class="product-info">
					<router-link :to="{path: '/product_detail?id=' + itemInfo.id}" class="product-info">
						<img :src="itemInfo.goods_main_photo" class="product-img" />
						<div class="product-detail">
							<p class="product-name">{{itemInfo.name}}</p>
							<p class="product-type">{{itemInfo.productType}}</p>
							<div class="product-price">
								<span class="now-price">￥{{itemInfo.price}}</span>
								<span class="prime-price" v-if="itemInfo.productNowPrice !== itemInfo.productPrimePrice">￥{{itemInfo.productPrimePrice}}</span>
								<span class="product-num">&times;{{itemInfo.count}}</span>
							</div>
						</div>
					</router-link>
				</div>
			</mt-cell-swipe>
		</div>
		<!--购物车 结算栏-->
		<div class="balance-bar">
			<div class="checkbox">
				<input type="checkbox" :checked="isCheckedAll" @change="handleChangeCheckedAllItem(isCheckedAll)" />
				<label>全选</label>
			</div>
			<div class="price-info">
				合计: <span>￥{{api.priceFormat(cartInfo.totalPrice)}}</span>
				<button>结算（{{totalNum}}）</button>
			</div>
		</div>
		<!--tabbar-->
		<tabbar></tabbar>
	</div>
</template>

<script>
	import tabbar from '../Sub/Tabbar';
	import { MessageBox, Toast } from 'mint-ui';
	export default {
		name: 'cart',
		data() {
			//			var cartData = [];
			//			for(var i = 0; i < 5; i++) {
			//				cartData.push({
			//					storeName: '测试商铺',
			//					storeIcon: 'http://www.css88.com/favicon-32.png',
			//					dataProductList: [],
			//					isChecked: false
			//				});
			//				for(var k = 0; k < parseInt(Math.random() * 5 + 1); k++) {
			//					cartData[i].dataProductList.push({
			//						productName: '测试商品名称',
			//						productUrl: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2912299985,3894161168&fm=173&s=ED64536E8CE4A49603F5711A0300C091&w=218&h=146&img.JPG',
			//						productType: '测试类型',
			//						productNowPrice: '599',
			//						productPrimePrice: '899',
			//						num: parseInt(Math.random() * 5 + 1),
			//						isChecked: false
			//					})
			//				}
			//			}
			return {
				cartData: [],
				cartInfo: {
					totalPrice: 0
				},
				isCheckedAll: false,
				totalNum: 0
			}
		},
		created() {
			sessionStorage.setItem('tabbarItem', 'cart');
			this.api.setHeader('购物车(' + this.calcTotalNumber() + ')');
		},
		methods: {
			handleChangeAllChecked(row, idx) {
				if(!row.isChecked) { // 未选中
					var checkedAllProduct = row.dataProductList;
					for(var i = 0, len = checkedAllProduct.length; i < len; i++) {
						checkedAllProduct[i].isChecked = true;
						this.handleChangeCountTotalPrice(checkedAllProduct[i].price, true);
					}
					this.cartData[idx].isChecked = true;
					this.cartData[idx].dataProductList = checkedAllProduct;
				} else { // 选中
					var checkedAllProduct = row.dataProductList;
					for(var i = 0, len = checkedAllProduct.length; i < len; i++) {
						checkedAllProduct[i].isChecked = false;
						this.handleChangeCountTotalPrice(checkedAllProduct[i].price, false);
					}
					this.cartData[idx].isChecked = false;
					this.cartData[idx].dataProductList = checkedAllProduct;
				}
				this.totalNum = this.countTotalCheckedNum();
			},
			handleChangeCheckedItem(row, idx, item, $index) {
				if(!row.isChecked) {
					this.cartData[$index].dataProductList[idx].isChecked = true;
					this.handleChangeCountTotalPrice(row.price, true);
				} else {
					this.cartData[$index].dataProductList[idx].isChecked = false;
					this.handleChangeCountTotalPrice(row.price, false);
				}
				var isCheckedAll = false;
				for(var i = 0, len = this.cartData[$index].dataProductList.length; i < len; i++) {
					if(this.cartData[$index].dataProductList[i].isChecked) {
						isCheckedAll = true;
					} else {
						isCheckedAll = false;
						break;
					}
				}
				if(isCheckedAll) {
					this.cartData[$index].isChecked = true;
				} else {
					this.cartData[$index].isChecked = false;
				}
				this.totalNum = this.countTotalCheckedNum();
			},
			handleChangeCheckedAllItem(bool) {
				this.isCheckedAll = !bool;
				var data = this.cartData;
				if(!bool) {
					this.cartInfo.totalPrice = 0;
					for(var i = 0, len = data.length; i < len; i++) {
						data[i].isChecked = true;
						for(var k = 0, leng = data[i].dataProductList.length; k < leng; k++) {
							data[i].dataProductList[k].isChecked = true;
							this.cartInfo.totalPrice += Number(data[i].dataProductList[k].price);
						}
					}
					this.cartData = data;
				} else {
					this.cartInfo.totalPrice = 0;
					for(var i = 0, len = data.length; i < len; i++) {
						data[i].isChecked = false;
						for(var k = 0, leng = data[i].dataProductList.length; k < leng; k++) {
							data[i].dataProductList[k].isChecked = false;
						}
					}
					this.cartData = data;
				}
				this.totalNum = this.countTotalCheckedNum();
			},
			countTotalCheckedNum() {
				var count = 0,
					data = this.cartData;
				for(var i = 0, len = data.length; i < len; i++) {
					for(var k = 0, leng = data[i].dataProductList.length; k < leng; k++) {
						if(data[i].dataProductList[k].isChecked) {
							count++;
						}
					}
				}
				return count;
			},
			handleChangeCountTotalPrice(price, bool) {
				if(bool) {
					this.cartInfo.totalPrice += Number(price);
				} else {
					this.cartInfo.totalPrice -= Number(price);
				}
			},
			calcTotalNumber() {
				var count = 0,
					data = this.cartData;
				for(var i = 0, len = data.length; i < len; i++) {
					count += data[i].dataProductList.length;
				}
				return count;
			},
			getList() {
				this.$http.post('/mobliecart/goods_cart1.htm', {

				}).then(res => {
					if(res.code == 0) {
						this.cartData = res.data;
					}
				})
			},
			handleClickDeleteItem(row, ops) {
				MessageBox.confirm('确定从购物车中删除该商品?').then(action => {
					this.$http.post('/mobliecart/remove_goods_cart.htm', {
						id: row.cart_id,
						store_id: ops.store_id
					}).then(res => {
						if(res.code == 0) {
							Toast('成功');
							this.getList();
						}
					})
				}).catch(res => {});
			}
		},
		components: {
			tabbar
		},
		created() {
			this.getList();
		}
	}
</script>

<style lang="less">
	.home-cart {
		background-color: #EFEFEF;
		margin-bottom: 2rem;
		.balance-bar {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0.98rem;
			z-index: 10;
			background-color: #FFFFFF;
			display: flex;
			align-content: space-between;
			font-size: 0.24rem;
			background-color: #FFFFFF;
			border-top: 1px solid #DFDFDF;
			width: 100%;
			height: 0.88rem;
			line-height: 0.88rem;
			box-sizing: border-box;
			padding-left: 0.12rem;
			.checkbox {
				width: 1.5rem;
				flex: 1;
			}
			.price-info {
				flex: 2;
				position: relative;
				span {
					font-size: 0.28rem;
					color: #E4393C;
				}
				button {
					position: absolute;
					top: 0;
					right: 0;
					width: 2rem;
					height: 100%;
					border: none;
					background-color: #E4393C;
					color: #FFFFFF;
				}
			}
		}
		.store-item {
			margin-bottom: 0.2rem;
			background-color: #FFFFFF;
		}
		.store-info {
			font-size: 0.24rem;
			display: flex;
			align-items: center;
			margin-left: 0.24rem;
			border-bottom: 1px solid #DFDFDF;
			padding: 0.15rem 0;
			.iconfont {
				font-size: 0.24rem;
			}
		}
		.checkbox {
			height: 100%;
		}
		.store-icon {
			width: 0.24rem;
			margin-right: 0.2rem;
		}
		.store-name {
			font-size: 0.24rem;
		}
		.product-item {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #DFDFDF;
			height: 2rem;
			/*padding-left: 0.24rem;
			padding-right: 0.24rem;*/
			box-sizing: border-box;
		}
		.product-info {
			display: flex;
			width: 100%;
			height: 2rem;
			font-size: 0.24rem;
			&>div {
				padding: 0.15rem 0;
			}
			.product-info {
				margin-left: 0.2rem;
			}
			.iconfont {
				display: flex;
				align-items: center;
			}
			.product-img {
				padding: 0.15rem 0;
				max-width: 2.5rem;
				margin-right: 0.2rem;
			}
			.product-detail {
				position: relative;
				.product-name {
					font-size: 0.28rem;
					color: #363636;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.product-type {
					color: #CCCCCC;
					font-size: 0.24rem;
				}
				.product-price {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0.15rem;
					display: flex;
					justify-content: space-between;
					.now-price {
						font-size: 0.28rem;
						color: #E4393C;
					}
					.prime-price {
						text-decoration: line-through;
						color: #CCCCCC;
						font-size: 0.24rem;
					}
					.product-num {
						color: #CCCCCC;
					}
				}
			}
		}
	}
</style>